/*
 * @Author: xiaosihan 
 * @Date: 2024-07-30 23:53:51 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-09-01 12:57:09
 */

import { CloseOutlined } from "@ant-design/icons";
import utilsApi from "@api/utilsApi";
import utils from "@utils";
import { Button, Modal, Spin } from "antd";
import { autorun } from "mobx";
import { ReactNode, useEffect, useRef, useState } from "react";
import uploadIcon1PNG from "../uploadIcon1.png";
import styles from "./uploadProgressModal.module.less";
import uploadProgressModalStore from "./uploadProgressModalStore";

interface Iprops {
    children?: ReactNode
}

// 上传进度弹窗
export default function UploadProgressModal() {

    const dom = useRef<HTMLDivElement | null>(null);

    const [open, setOpen] = useState(uploadProgressModalStore.open);
    const [fileName, setFileName] = useState(uploadProgressModalStore.fileName);
    const [modelId, setModelId] = useState(uploadProgressModalStore.modelId);
    const [progress, setProgress] = useState(uploadProgressModalStore.progress);
    const [formmatConrt, setFormmatConrt] = useState(uploadProgressModalStore.formmatConrt);
    // 附件上传列表
    const [uploadAttachmentList, setUploadAttachmentList] = useState(uploadProgressModalStore.uploadAttachmentList);

    useEffect(() => {

    }, []);

    useEffect(() => autorun(() => {
        setModelId(uploadProgressModalStore.modelId);
        setOpen(uploadProgressModalStore.open);
        setFileName(uploadProgressModalStore.fileName);
        setUploadAttachmentList(uploadProgressModalStore.uploadAttachmentList);
        setProgress(uploadProgressModalStore.progress);
        setFormmatConrt(uploadProgressModalStore.formmatConrt);
    }, { delay: 30 }), []);

    //选择上传的附件
    const selectAttachment = async () => {
        const files = await utils.selectFiles("*");
        uploadProgressModalStore.addUploadAttachmentList(files);
    }

    return (
        <Modal
            centered={true}
            open={open}
            footer={false}
            maskClosable={false}
            onCancel={() => {
                utilsApi.cancelUploadOss(); // 取消上传
                uploadProgressModalStore.setOpen(false);
            }}
        >
            <Spin
                tip="模型优化中...."
                spinning={formmatConrt}
            >
                <div className={styles.uploadProgress} >
                    <div className={styles.title} >文件处理中</div>
                    <br />
                    <br />
                    <br />
                    {
                        fileName &&
                        <div className={styles.progress_bg} >
                            <div className={styles.bar} ref={dom} style={{ width: `${progress * 100}%` }} ></div>
                            <img className={styles.icon} src={uploadIcon1PNG} alt="" />
                            <span className={styles.file_name} >{fileName}</span>
                        </div>
                    }
                    {
                        uploadAttachmentList.map((u, i) => {
                            return (
                                <div className={styles.progress_bg} key={u.id} >
                                    <div className={styles.bar} ref={dom} style={{ width: `${u.uploadProgress * 100}%` }} ></div>
                                    <span className={styles.icon} ></span>
                                    <span className={styles.file_name} >{u.name}</span>
                                    <CloseOutlined
                                        className={styles.close}
                                        onClick={() => {
                                            uploadProgressModalStore.deleteAttachment(u.id);
                                        }}
                                    />
                                </div>
                            )
                        })
                    }
                    <br />
                    <br />
                    <br />
                </div>
                <div className={styles.btn} >
                    <div className={styles.sub_title} >上传的所有内容都是安全和加密的</div>
                    <Button disabled={progress < 1} onClick={() => selectAttachment()} >上传附件文件</Button>&nbsp;
                    <Button
                        type="primary"
                        disabled={progress < 1}
                        onClick={() => {
                            uploadProgressModalStore.setOpen(false);
                            uploadProgressModalStore.setProgress(0);
                            uploadProgressModalStore.setUploadAttachmentList([]);
                        }}
                    >完成</Button>
                </div>
            </Spin>
        </Modal>
    );

}
